<template>
  <div>
    <!-- <div  :id="ichartName"></div> -->
    <div class="ichart-box">
      <div id="picIchart" class="pic-ichart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'GovSuperviseAdminTabularData',
  props: {
    ichartName: {
      type: String,
      required: false,
    }
  },
  data() {
    return {
      myChart: '',
      dataList: [], //数据列表
    };
  },
  created() {

  },
  mounted() { },
  methods: {
    getDataList(data,type) { //获取areaId
      this.dataList = data
      this.orderSource = type
      console.log('this.dataList',this.dataList)
      this.initChart()
    },
    domIsExistence(name) {
      if (name != null && name != "" && name != undefined) {
          name.dispose(); //解决echarts dom已经加载的报错
      }
    },
    // 交易数据汇总订单金额明细
    initChart() {
      var _this = this
      this.domIsExistence(this.myChart)
      this.myChart = echarts.init(document.getElementById('picIchart'));
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = params.name + '：' + params.data.ratio + '% ' + params.value;
            return str
          }
        },
        color: ['#5B90FF', '#FF6B4B', '#FFA02F', '#F1D233', '#A980FF', '#FF9898', '#FF8181', '#01D6F3', '#FF7953',
          '#54E8B8', '#FFA749'
        ],
        legend: {
          selectedMode: false,
          top: 'center',
          right: '5%',
          orient: 'vertical',
          icon: 'circle',
          // itemGap: 15,
          itemWidth: 9,
          lineHeight: 9,
          formatter: function (name) {
            let datas = _this.dataList.detailDTOList
            let value = ''
            let ratio = ''
            for (let i = 0, l = datas.length; i < l; i++) {
              if (datas[i].name == name) {
                ratio = datas[i].ratio;
                value = datas[i].value;
              }
            }
            return '{oneone|'+name+'}' + ' '+ '{twotwo|'+ratio+'%}' + ' '+  '{threethree|'+value+'}';
          },
          textStyle: {
            // 文字的样式
            color: '#576276',//继承了父颜色
            fontWeight: '400',
            padding: [0, 0, 0, 5],
            rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
              oneone: {
                width: 90,
                fontSize: 14,
              },
              twotwo: {
                width: 50,
                fontSize: 14,
              },
              threethree: {
                width: 50,
                fontSize: 14,
              },
            },
          },
        },
        series: [{
          // name: 'Access From',
          type: 'pie',
          radius: ['65%', '90%'],
          center: ["25%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '',
            rich: {
              total: {
                fontWeight: 'normal',
                fontSize: 20,
                fontFamily: "微软雅黑",
                color: '#4B5466',
                lineHeight: 22,
              },
              active: {
                fontWeight: 'normal',
                fontFamily: "微软雅黑",
                fontSize: 26,
                color: '#4B5466',
                lineHeight: 42,
              },
            }
          },
          emphasis: {
            scale: true,
            scaleSize: 10,
          },
          labelLine: {
            show: false
          },
          data: _this.dataList.detailDTOList,
        }]
      }
      if(this.orderSource == 1){
          option.series[0].label.formatter =  '{total|销售订单数}' + '\n\r' + '{active|' + _this.dataList.ordersCount + '}' //销售订单数
        }else if(this.orderSource == 2){
          option.series[0].label.formatter =  '{total|实付金额}' + '\n\r' + '{active|' + _this.dataList.paidInAmount + '}' //实付金额
        }else if(this.orderSource == 3){
          option.series[0].label.formatter =  '{total|支付人数}' + '\n\r' + '{active|' + _this.dataList.payerCount + '}' //支付人数
        }
      this.myChart.setOption(option)
    },
  },
};

</script>

<style lang="scss" scoped>
.ichart-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  .pic-ichart {
    width: 100%;
    height: 100%;
  }
}
</style>
